/**
* Created by renhanyi on 19/06/20.
* 首页
*/
import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform, Image, TouchableOpacity, ScrollView, TouchableWithoutFeedback, NativeModules, Animated } from "react-native";
import { Colors, ImageRes, Dimens, Tools } from '../../utils/Assets.js';
import { Actions } from "react-native-router-flux";
import Picker from 'react-native-wheel-picker'

const ButtonW = Dimens.DeviceWidth / 2;
const PickerH = 250

class CustormPicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            offset: new Animated.Value(Dimens.DeviceHeight),
            dataSelectIndex: 0
        };
        this._onDataValueChange = this._onDataValueChange.bind(this);
        this._confirm = this._confirm.bind(this);
    }

    componentDidMount() {
        Animated.timing(this.state.offset, { duration: 200, toValue: 0 }).start();
    }

    componentWillUnmount() {
    }
    render() {
        let { offset, dataSelectIndex } = this.state;
        let { pickData } = this.props
        return (
            <Animated.View style={[styles.container, { transform: [{ translateY: offset }] }]}>
                <View style={{ width: Dimens.DeviceWidth, backgroundColor: 'white' }}>
                    <View style={{ height: PickerH, flexDirection: 'row' }}>
                        {this.renderItem(pickData, dataSelectIndex, this._onDataValueChange)}
                    </View>
                    <View style={{ flexDirection: 'row', borderTopColor: '#e0e0e0', borderTopWidth: StyleSheet.hairlineWidth, marginBottom: Dimens.isIPhoneX ? 15 : 0 }}>
                        <TouchableOpacity style={{ width: ButtonW, backgroundColor: 'transparent', height: 44, justifyContent: 'center' }} activeOpacity={0.8} onPress={this._closeModal.bind(this, Actions.pop)}>
                            <Text style={{ fontSize: 15, color: '#333333', alignSelf: 'center' }}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ width: ButtonW, backgroundColor: 'transparent', height: 44, justifyContent: 'center' }} activeOpacity={0.8} onPress={this._closeModal.bind(this, this._confirm)}>
                            <Text style={{ fontSize: 15, color: '#333333', alignSelf: 'center' }}>确认</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Animated.View>
        );
    }

    renderItem(source, selectedValue, onValueChange) {
        return (
            <Picker
                style={{ flex: 1, height: PickerH }}
                selectedValue={selectedValue}
                itemStyle={{ color: '#333333', fontSize: 15, fontWeight: 'bold' }}
                onValueChange={onValueChange}>
                {source.map((value, i) => {
                    return (
                        <Picker.Item label={value} value={i} key={i} />
                    )
                })}
            </Picker>
        )
    }

    /** 私有方法 */
    _closeModal(callback) {
        Animated.timing(this.state.offset, { duration: 200, toValue: Dimens.DeviceHeight }).start(callback);
    }
    _confirm() {
        Actions.pop();
        let data = this.props.pickData[this.state.dataSelectIndex]
        if (this.props.callback) this.props.callback({ label: `${data}`, index: this.state.dataSelectIndex });
    }
    _onDataValueChange(index) {
        this.setState({ dataSelectIndex: index });
    }
}

const styles = StyleSheet.create({
    container: {
        position: "absolute",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: 'rgba(52,52,52,0.3)',
        justifyContent: 'flex-end',
    },
});
module.exports.CustormPicker = CustormPicker;
